<template>
<div class="tab-pane active" id="isup-config">
    <form role="form" class="form-horizontal" autocomplete="off" @submit.prevent="onISUPSubmit" data-vv-scope="isup">
        <div :class="['form-group' , {'has-error': errors.has('isup.Host')}]">
            <label for="isup-host" class="col-sm-3 control-label">服务 IP</label>
            <div class="col-sm-8">
                <input type="text" id="isup-host" class="form-control" name="Host" data-vv-as="服务 IP" v-model.trim="Host">
                <!-- <span class="help-block">{{errors.first('isup.Host')}}</span> -->
            </div>
        </div>
        <div :class="['form-group' , {'has-error': errors.has('isup.Port')}]">
            <label for="isup-port" class="col-sm-3 control-label">接入端口</label>
            <div class="col-sm-8">
                <input id="isup-port" type="text" class="form-control" name="Port" data-vv-as="接入端口" v-validate="'numeric'" v-model.trim.number="Port">
                <span class="help-block">{{errors.first('isup.Port')}}</span>
            </div>
        </div>
        <div :class="['form-group' , {'has-error': errors.has('isup.StreamPortRange')}]">
            <label for="isup-stream-port-range" class="col-sm-3 control-label">收流端口区间</label>
            <div class="col-sm-8">
                <input type="text" id="isup-stream-port-range" class="form-control" name="StreamPortRange" data-vv-as="收流端口区间" v-model.trim="StreamPortRange">
                <span class="help-block">{{errors.first('isup.StreamPortRange')}}</span>
            </div>
        </div>
        <div :class="['form-group' , {'has-error': errors.has('isup.Password')}]">
            <label for="isup-password" class="col-sm-3 control-label">接入密码</label>
            <div class="col-sm-8">
                <div class="input-group">
                    <input type="text" id="isup-password" class="form-control" name="Password" data-vv-as="接入密码" v-model.trim="Password" v-if="rawPwd">
                    <input type="password" id="isup-password" class="form-control" name="Password" autocomplete="new-password" data-vv-as="接入密码" v-model.trim="Password" v-else
                        onfocus="this.readOnly = false;" onblur="this.readOnly = true;" style="background-color: #FFF;" readonly>
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-default" @click="rawPwd = !rawPwd;" style="border-top-right-radius:0;border-bottom-right-radius:0;">
                            <i class="glyphicon glyphicon-eye-open" v-if="rawPwd"></i>
                            <i class="glyphicon glyphicon-eye-close" v-else></i>
                        </button>
                    </span>
                </div>
                <!-- <span class="help-block">{{errors.first('isup.Password')}}</span> -->
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-3 col-sm-8 checkbox">
                <el-checkbox id="isup-enable" style="margin-left:-19px;margin-top:-5px;" size="small" v-model.trim="Enable" name="Enable">
                    启用 ISUP
                </el-checkbox>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <button type="submit" class="btn btn-primary" :disabled="isISUPNoChange || errors.any('isup') || bCommitting">保存</button>
            </div>
        </div>
        <div :class="['form-group' , {'has-error': Enable && !Listen, 'has-success': Enable && Listen}]">
            <div class="col-sm-offset-3 col-sm-8">
                <a role="button" class="text-success" @click.prevent="showDevices" v-if="Enable && Listen && OnlineCount">{{Status}}&nbsp;</a>
                <span class="help-block" v-else>{{Status}}&nbsp;</span>
            </div>
        </div>
    </form>
    <ISUPDeviceListDlg ref="isup-device-list-dlg" size="modal-lgg"></ISUPDeviceListDlg>
</div>
</template>

<script>
import $ from "jquery";
import { mapState } from "vuex";
import ISUPDeviceListDlg from "components/ISUPDeviceListDlg.vue"

export default {
    data() {
        return {
            bCommitting: false,
            Host: "",
            Port: 7660,
            StreamPortRange: "8000,8002",
            Password: "",
            Enable: false,
            Listen: false,
            Status: "",
            OnlineCount: 0,
            BuildVersion: "",
            rawPwd: true,
            remoteISUPData: "",
            timer: 0,
        }
    },
    components: {
        ISUPDeviceListDlg
    },
    mounted() {
        this.getISUPConfig();
        this.timer = setInterval(() => {
            this.getISUPConfig(true);
        }, 2000);
    },
    beforeDestroy() {
        if (this.timer) {
            clearInterval(this.timer);
            this.timer = 0;
        }
    },
    methods: {
        async onISUPSubmit() {
            var ok = await this.$validator.validateAll('isup');
            if (!ok) {
                var e = this.errors.items[0];
                this.$message({
                    type: "error",
                    message: e.msg
                });
                $(`[name=${e.field}]`).focus();
                return;
            }
            this.bCommitting = true;
            $.get("/api/v1/isup/setconfig", this.getISUPCommitObject()).then(data => {
                if ((data.LiveQing || data.NVR).Header.ErrorNum == 200) {
                    this.$message({
                        type: "success",
                        message: "配置成功！"
                    });
                    this.getISUPConfig();
                } else {
                    this.$message({
                        type: "error",
                        message: "配置失败！"
                    });
                }
            }).always(() => {
                this.bCommitting = false;
            })
        },
        getISUPCommitObject() {
            return {
                Host: this.Host,
                Port: this.Port,
                StreamPortRange: this.StreamPortRange,
                Password: this.Password,
                Enable: this.Enable,
            };
        },
        getISUPConfig(statusOnly) {
            $.get("/api/v1/isup/config").then(ret => {
                var body = (ret.LiveQing || ret.NVR).Body;
                if (!body) return;
                this.Listen = !!body.Listen;
                this.Status = body.Status || "";
                this.OnlineCount = body.OnlineCount || 0;
                this.BuildVersion = body.BuildVersion || "";
                if(statusOnly) {
                    return
                }
                this.Host = body.Host || "";
                this.Port = body.Port || "";
                this.StreamPortRange = body.StreamPortRange || "";
                this.Enable = !!body.Enable;

                setTimeout(() => {
                    this.Password = body.Password || "";
                    this.rawPwd = false;
                    this.remoteISUPData = JSON.stringify(this.getISUPCommitObject());
                }, 300);
            });
        },
        showDevices(){
            this.$refs["isup-device-list-dlg"].show();
        },
    },
    computed: {
        ...mapState([ "serverInfo" ]),
        isISUPNoChange() {
            var localeData = JSON.stringify(this.getISUPCommitObject());
            return this.remoteISUPData.localeCompare(localeData) == 0;
        }
    }
}
</script>
